<template>
    <div class="hall-container"> 
      <div class="hall-content">
        <h2>{{ currentFloor.title }}</h2>
        <h3>{{ currentFloor.english }}</h3>
        <p v-if="currentFloor.status === 'open'">{{ currentFloor.description }}</p>
        <p v-else-if="currentFloor.status === 'closed'" style="color: red;">当前展厅已闭馆。</p>
        <img v-if="currentFloor.status === 'open'" :src="currentFloor.image" alt="展厅图片" class="hall-image">
    </div>
    <footer class="footer">
      <p>© 2025 历史博物馆. 版权所有.</p>
      <button class="back-to-top" @click="scrollToTop">回到顶部</button>
    </footer>
    </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        floors: {
          '/exhibitionhall/floor-1': {
            title: '一楼',
            english:'floor-1',
            status: 'open',
            description: '展示历史博物馆的常设展览，包括历史文物和重要展品。',
            image: require('@/assets/floor1.jpg')
          },
          '/exhibitionhall/floor-2': {
            title: '二楼',
            english:'floor-2',
            status: 'open',
            description: '临时展览区域，定期更新展览主题，展示多样化的文化与艺术。',
            image: require('@/assets/floor2.jpg')
          },
          '/exhibitionhall/floor-3': {
            title: '三楼',
            english:'floor-3',
            status: 'open',
            description: '专题展览区域，集中展示某一特定主题或艺术家的作品。',
            image: require('@/assets/floor3.jpg')
          }
        },
      };
    },
    computed: {
      currentFloor() {
        return this.floors[this.$route.path] || this.floors['/exhibitionhall/floor-1'];
      }
    },
    watch: {
      '$route'(to) {
        this.activeIndex = to.path;
      }
    },
    created() {
      this.activeIndex = this.$route.path;
    },
    methods: {
      handleSelect(key) {
        if (this.$route.path !== key) {
          this.$router.push(key);
        }
      },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
    }
  }
  </script>
  
  <style scoped>
    .hall-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/background.jpg') repeat-x center/cover;
    z-index: -1;
    opacity: 0.3;
  }
  
  .exhibition-halls-container {
    position: relative;
    min-height: 100vh;
  }
  
  .hall-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(5px);
  }
  
  .hall-content h2 {
    font-size: 30pt;
    color: #333;
    margin-bottom: 10px;
  }
  
  .hall-content h3{
    font-size: 12pt;
    color: gray;
    margin: 10px 0 40px;
 }

  .hall-content p {
    text-align: justify;
    font-size: 18pt;
    line-height: 1.8;
    margin-bottom: 40px;
    font-family: "KaiTi", "STKaiti", "FangSong", serif;
  }
  
  .hall-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 40px auto;
    border-radius: 10px;
  }
  
/* 底边栏 */
.footer {
  background: #333333;
  color: white;
  border-top: 2px solid #4D4D4D;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
  width: 100%; /* 确保全宽 */
  margin-top: auto; /* 将footer推到页面底部 */
}
 
.back-to-top {
  padding: 8px 16px;
  background: #555555;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  min-width: 100px;
}
 
.back-to-top:hover {
  background: #666666;
  transform: translateY(-1px);
}
 
@media (max-width: 768px) {
  .footer {
    flex-wrap: wrap;
    padding: 12px 10px;
    gap: 10px;
  }
  
  .back-to-top {
    min-width: auto;
    width: calc(50% - 10px);
  }
}
  </style>